<template>
  <div class="payment-container">
    <van-nav-bar
      title="支付订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 显示每个商品的名称和价格 -->
    <div v-for="(item, index) in products" :key="index" class="product-info">
      <div class="amount">
        <span class="amount-text">¥ {{ item.priceorder }}</span>
      </div>
      <div class="product-name">
        <span>{{ item.comname }}</span>
      </div>
    </div>

    <div class="payment-instructions">
      <h3>请选择支付方式:</h3>
    </div>

    <div class="payment-methods">
      <el-card class="payment-option" @click="selectPaymentMethod('weixin')">
        <el-radio class="payment-radio" :label="'weixin'" v-model="selectedPaymentMethod">
          微信支付
        </el-radio>
      </el-card>
<!--      <el-card class="payment-option" @click="selectPaymentMethod('zhifubao')">-->
<!--        <el-radio class="payment-radio" :label="'zhifubao'" v-model="selectedPaymentMethod">-->
<!--          支付宝-->
<!--        </el-radio>-->
<!--      </el-card>-->
    </div>

    <el-button
      type="primary"
      :disabled="!selectedPaymentMethod"
      @click="confirmPayment">
      确认支付
    </el-button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      products: [], // 更新为数组
      selectedPaymentMethod: '',
      idure: [],
      ids: [],
      orers:''
    };
  },
  mounted() {
    this.id = localStorage.getItem('idusr');
    this.ids = localStorage.getItem('id');
    this.show1();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    generateRandomNumber() {
      const randomNumber = Math.floor(1000000000 + Math.random() * 9000000000);
      return randomNumber.toString(); // 转换为字符串
    },
    show1() {
      axios.post(`/shoppingorder/findShoppingById?id=${this.ids||this.idure}`).then(res => {
        // 假设后端返回的结果格式中，shoppingOrder是个数组
        this.products = res.data.data; // 获取商品数组
      });
    },
    selectPaymentMethod(method) {
      this.selectedPaymentMethod = method;
    },
    confirmPayment() {
      if (this.selectedPaymentMethod) {
        const orderDetails = {
          id: this.id,
          products: this.products // 将产品数组传给后端
        };
        this.orers = this.generateRandomNumber()
        localStorage.setItem("orers",this.orers)
        axios.post(`/wxpay/getQrCodeUrl?orers=${this.orers}`,) // 假设这是你后端支付确认的接口
          .then(res => {
            // 后端返回的结果处理
            // 这里可以处理返回的数据，例如更新价格等
            this.$router.push('/Qrcode'); // 跳转到二维码支付页面
          })
          .catch(error => {
            console.error("支付过程中遇到错误:", error);
          });
      } else {
        alert('请先选择支付方式。');
      }
    },
  },
};
</script>



<style scoped>
.payment-container {
  padding: 16px;
  max-width: 400px;
  margin: auto;
  text-align: center; /* 让文本居中 */
}

.title {
  margin-bottom: 20px;
}

.amount {
  font-size: 24px; /* 调整金额字体大小 */
  margin: 20px 0; /* 增加上下间距 */
}

.product-name {
  text-align: center;
  margin-bottom: 20px;
}

.payment-instructions {
  margin-top: 20px;
  text-align: left; /* 左对齐 */
}

.payment-methods {
  margin-top: 10px;
}

.payment-option {
  margin: 10px 0; /* 给每个支付方式增加间距 */
  padding: 10px; /* 增加内边距 */
  border: 1px solid #e0e0e0; /* 添加边框 */
  border-radius: 5px; /* 圆角效果 */
  cursor: pointer; /* 鼠标悬停效果 */
}

.payment-radio {
  display: block; /* 使单选框成为块级元素 */
}

/* 确保按钮占满宽度 */
.el-button {
  width: 100%;
}
</style>
